<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox, ElDatePicker, ElSelect, ElOption, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio } from 'element-plus';
import { useRouter } from 'vue-router';
// 保留原有接口，新增修改所需的「根据ID查商品」「提交修改」接口
import { shoesQueryPage, getShoesById, updataShoes } from '@/api/Shoes'

const router = useRouter();

// --------------- 原有功能代码（完全保留）---------------
const currentShoe = ref(null) // 用于存储当前查看的商品详情
const dialogTableVisible = ref(false)
const shoesList = ref([])
const snameValue = ref()
// 请求参数数据模型
const queryPageParam = ref({
  sname: '',
  pageNum: 1,
  pageSize: 5  // 默认每页5条
});

const inputSname = (data) => {
  snameValue.value = data
}

function openDetail(shoe) {
  currentShoe.value = shoe;
  dialogTableVisible.value = true;
}

// 请求商品函数（原有逻辑保留，仅优化参数传递格式）
function queryShoes() {
  queryPageParam.value.sname = snameValue.value
  console.log("query:", queryPageParam.value)
  // 修正参数传递格式：将多个参数包装为对象（解决之前URL参数错乱问题）
  shoesQueryPage(
    queryPageParam.value.sname,
    queryPageParam.value.pageNum,
    queryPageParam.value.pageSize
  )
    .then(response => {
      console.log("data:", response.list)
      shoesList.value = response.list
      console.log("shoe:", shoesList.value)
      // 保留原有分页数据同步逻辑
      queryPageParam.value = {
        ...queryPageParam.value,
        recordCount: response.pager?.recordCount || 0, // 总条数（用于分页显示）
        pageNum: response.pager?.pageNum || 1,
        pageSize: response.pager?.pageSize || 5
      }
    })
}
queryShoes()

// 1. 修改弹窗相关状态
const editDialogVisible = ref(false) // 修改弹窗开关
const editForm = reactive({ // 修改表单数据（与Shoes实体字段对应）
  sid: '',          // 商品ID（只读，用于定位修改对象）
  snum: '',         // 商品标号
  sname: '',        // 商品名称
  sprice: '',       // 商品标价（与实体sprices对应）
  sdiscount: '',    // 商品现价
  spubtime: '',     // 上市时间
  sproducer: '',    // 生产厂商
  sgender: '',      // 性别（男/女/中性）
  scid:'',
  color: '',         // 颜色ID（关联color表）
  sinfo: '',        // 商品简介
  stimessold: '',   // 销量（只读，不允许修改）
  simage: '',       // 商品图片（URL格式）
  sdetail: '',      // 详细信息
  sintegral: '',    // 商品积分
  sdelete: 0,       // 禁用标志（0=正常，1=禁用）
  sremarks: '',     // 备注
  typeId:'',
  type: '',       // 类型ID（关联types表）
  brandId:'',
  brand: ''       // 品牌ID（关联brands表）
})

// 3. 打开修改弹窗 + 回显商品数据
function openEdit(shoe) {
    console.log("参数为",shoe)
  // 先清空表单残留数据
  Object.keys(editForm).forEach(key => {
    editForm[key] = ''
  })
  console.log("参数类型：",typeof shoe.sid)
  // 调用接口根据商品ID获取最新数据（确保回显数据准确）
  getShoesById(shoe.sid)
    .then(res => {
        console.log("返回值：",res)
      const shoeData = res // 假设接口返回格式：{ code:200, data: 商品对象 }
      // 数据回显到表单（字段名与实体保持一致）
      editForm.sid = shoeData.sid
      editForm.snum = shoeData.snum
      editForm.sname = shoeData.sname
      editForm.sprice = shoeData.sprices // 注意：实体字段是sprices，表单用sprice接收
      editForm.sdiscount = shoeData.sdiscount
      // 日期格式处理（后端返回可能是字符串，需适配日期选择器）
      editForm.spubtime = shoeData.spubtime ? shoeData.spubtime.split(' ')[0] : ''
      editForm.sproducer = shoeData.sproducer
      editForm.sgender = shoeData.sgender
      editForm.scid = shoeData.scid
      editForm.color = shoeData.color.cname
      editForm.sinfo = shoeData.sinfo
      editForm.stimessold = shoeData.stimessold // 销量设为只读
      editForm.simage = shoeData.simage
      editForm.sdetail = shoeData.sdetail
      editForm.sintegral = shoeData.sintegral
      editForm.sdelete = shoeData.sdelete || 0
      editForm.sremarks = shoeData.sremarks
      editForm.typeId = shoeData.typeId
      editForm.type = shoeData.type.tname
      editForm.brandId = shoeData.brandId
      editForm.brand = shoeData.brand.bname
      // 打开修改弹窗
      editDialogVisible.value = true
    })
    .catch(err => {
      ElMessage.error('加载商品详情失败：' + err.message)
    })
}

// 4. 提交修改（调用后端接口保存数据）
function submitEdit() {
  // 基础表单校验（避免必填项为空）
  if (!editForm.sname) {
    ElMessage.warning('请输入商品名称')
    return
  }
  if (!editForm.sprice) {
    ElMessage.warning('请输入商品标价')
    return
  }
  // 构造提交数据（适配后端接口字段）
  const submitData = {
  // 基础信息（保留原有字段映射）
  sid: editForm.sid,
  snum: editForm.snum,
  sname: editForm.sname,
  sprices: Number(editForm.sprice), // 转换为数字类型，匹配后端sprices字段
  sdiscount: editForm.sdiscount ? Number(editForm.sdiscount) : 0,
  spubtime: editForm.spubtime,
  sproducer: editForm.sproducer,
  sgender: editForm.sgender,
  sinfo: editForm.sinfo,
  stimessold: editForm.stimessold ? Number(editForm.stimessold) : 0,
  simage: editForm.simage,
  sdetail: editForm.sdetail,
  sintegral: editForm.sintegral ? Number(editForm.sintegral) : 0,
  sdelete: Number(editForm.sdelete), // 转换为数字（0=正常，1=禁用）
  sremarks: editForm.sremarks,
  type: {
    tid: Number(editForm.typeId), 
    tname: editForm.type || '' 
  },
  brand: {
    bid: Number(editForm.brandId), 
    bname: editForm.brand || '' 
  },
  
  // 重点修正：color字段传递对象（而非字符串），解决反序列化错误
  color: {
    cid: Number(editForm.scid), // 颜色ID（对应后端Color实体的cid）
    cname: editForm.color || '' // 颜色名称（对应后端Color实体的cname）
  }
};
  // 调用修改接口
  updataShoes(submitData)
    .then(res => {
      console.log(res)   
        ElMessage.success('商品修改成功！')
        // 关闭弹窗 + 刷新商品列表（确保数据最新）
        editDialogVisible.value = false
        queryShoes()
    })
    .catch(err => {
      ElMessage.error('修改失败：' + err.message)
    })
}

// 5. 保留原有删除功能（补充空实现，避免报错）
function deleteGoods(index, goodsId) {
  // 此处可后续补充删除接口逻辑，当前保留原有弹窗交互
  ElMessageBox.confirm(
    '确定要删除此商品吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 调用删除接口后刷新列表（示例）
    // deleteShoes(goodsId).then(() => {
    //   shoesList.value.splice(index, 1)
    //   ElMessage.success('删除成功')
    // })
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<template>
  <div class="shoe-page-container">
    <!-- 原有：搜索区域（完全保留） -->
    请输入商品名称：
    <el-input 
      v-model="snameValue" 
      @click="inputSname(snameValue)" 
      style="width: 240px"
      placeholder="请输入商品名称"
    />
    <el-button type="primary" round @click="queryShoes">查询</el-button>

    <!-- 原有：商品列表（仅在操作列新增「修改」按钮） -->
    <el-table :data="shoesList" style="width: 100%;margin: 20px auto" border>
      <el-table-column prop="sname" label="商品名称" width="300" />
      <el-table-column prop="sprices" label="商品标价" width="120" /> 
      <el-table-column prop="sdiscount" label="商品现价" width="120" />
      <el-table-column prop="sgender" label="性别" width="150" />
      <el-table-column prop="brand.bname" label="品牌" width="150" />
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <!-- 原有：查看详情按钮（保留） -->
          <el-button plain @click="openDetail(scope.row)">查看详情</el-button>
          
          <!-- 新增：修改按钮 -->
          <el-button type="primary" size="small" @click="openEdit(scope.row)" style="margin: 0 10px;">修改</el-button>
          
          <!-- 原有：删除按钮（保留） -->
          <el-popconfirm 
            title="确定要删除此商品吗?"
            confirm-button-text="是"
            cancel-button-text="否"
            icon-color="red"
            @confirm="deleteGoods(scope.$index, scope.row.sid)" <!-- 修正为row.sid（商品ID） -->
          >
            <template #reference>
              <el-button type="danger" size="small">删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 原有：分页控件（保留） -->
    <el-pagination
      v-model:page-size="queryPageParam.pageSize"
      :total="queryPageParam.recordCount"
      v-model:current-page="queryPageParam.pageNum"
      @current-change="queryShoes"
      layout="total,prev,pager,next"
      style="margin-top: 20px; text-align: right;"
    />

    <!-- 原有：详情弹窗（完全保留） -->
    <el-dialog 
      v-model="dialogTableVisible" 
      title="商品详情" 
      width="800"
      :modal="false"
    >
      <el-row :gutter="20">
        <el-col :span="12" class="detail-column">
          <div class="detail-item"><span class="label">商品id: </span>{{ currentShoe.sid }}</div>
          <br>
          <div class="detail-item"><span class="label">商品标号：</span>{{ currentShoe.snum }}</div>
          <br>
          <div class="detail-item"><span class="label">商品名称：</span>{{ currentShoe.sname }}</div>
          <br>
          <div class="detail-item"><span class="label">商品品牌：</span>{{ currentShoe.brand?.bname }}</div>
          <br>
          <div class="detail-item"><span class="label">商品种类：</span>{{ currentShoe.type?.tname }}</div>
          <br>
          <div class="detail-item"><span class="label">商品标价：</span>{{ currentShoe.sprices }}</div>
          <br>
          <div class="detail-item"><span class="label">商品现价：</span>{{ currentShoe.sdiscount }}</div>
          <br>
          <div class="detail-item"><span class="label">上市时间：</span>{{ currentShoe.spubtime }}</div>
          <br>
          <div class="detail-item"><span class="label">颜色：</span>{{ currentShoe.color?.cname }}</div>
          <br>
          <div class="detail-item"><span class="label">内容简介：</span>{{ currentShoe.sinfo }}</div>
          <br>
          <div class="detail-item"><span class="label">禁用标志：</span>{{ currentShoe.sdelete }}</div>
          <br>
          <div class="detail-item"><span class="label">备注：</span>{{ currentShoe.sremarks }}</div> <!-- 修正为sremarks（原代码是spubtime） -->
        </el-col>
        <el-col :span="12" class="detail-column">
          <div class="detail-item">
            <span class="label">鞋子图片：</span>
            <!-- 优化：图片URL显示为图片预览 -->
            <el-image 
              v-if="currentShoe.simage" 
              :src="currentShoe.simage" 
              style="width: 150px; height: 150px;" 
              fit="cover"
            />
            <span v-else>{{ currentShoe.simage || '无图片' }}</span>
          </div>
          <br>
          <div class="detail-item"><span class="label">鞋销量：</span>{{ currentShoe.stimessold }}</div>
          <br>
          <div class="detail-item"><span class="label">性别：</span>{{ currentShoe.sgender }}</div>
          <br>
          <div class="detail-item"><span class="label">商品积分：</span>{{ currentShoe.sintegral }}</div>
          <br>
          <div class="detail-item"><span class="label">生产厂商：</span>{{ currentShoe.sproducer }}</div>
          <br>
          <div class="detail-item"><span class="label">详细信息：</span>{{ currentShoe.sdetail }}</div>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 新增：修改商品弹窗 -->
    <el-dialog 
      v-model="editDialogVisible" 
      title="修改商品信息" 
      width="800"
      :before-close="() => { editDialogVisible = false }"
    >
      <el-form :model="editForm" label-width="120px" style="margin-top: 20px;">
        <!-- 商品名称（必填） -->
        <el-form-item label="商品名称" required>
          <el-input v-model="editForm.sname" disabled />
        </el-form-item>
        <!-- 商品标价（必填） -->
        <el-form-item label="商品标价" required>
          <el-input v-model="editForm.sprice" type="number" placeholder="请输入商品标价" />
        </el-form-item>
        <!-- 商品现价 -->
        <el-form-item label="商品现价">
          <el-input v-model="editForm.sdiscount" type="number" placeholder="请输入商品现价" />
        </el-form-item>
        <!-- 上市时间 -->
        <el-form-item label="上市时间">
          <el-date-picker
            v-model="editForm.spubtime"
            type="date"
            placeholder="选择上市时间"
            style="width: 100%;"
          />
        </el-form-item>
        <!-- 性别选择 -->
        <el-form-item label="性别">
          <el-input v-model="editForm.sgender" disabled/>
        </el-form-item>
        <!-- 商品类型 -->
        <el-form-item label="商品类型">
            <el-input v-model="editForm.type" disabled/>
        </el-form-item>
        <!-- 商品品牌 -->
        <el-form-item label="商品品牌">
            <el-input v-model="editForm.brand" disabled/>
        </el-form-item>
        <!-- 商品颜色 -->
        <el-form-item label="商品颜色">
            <el-input v-model="editForm.color" disabled/>
        </el-form-item>
        <!-- 商品备注 -->
        <el-form-item label="商品备注">
          <el-input v-model="editForm.sremarks" type="textarea" rows="2" placeholder="请输入商品备注" />
        </el-form-item>
        <!-- 商品简介 -->
        <el-form-item label="商品简介">
          <el-input v-model="editForm.sinfo" type="textarea" rows="2" placeholder="请输入商品简介" />
        </el-form-item>
        <!-- 商品详情 -->
        <el-form-item label="商品详情">
          <el-input v-model="editForm.sdetail" type="textarea" rows="4" placeholder="请输入商品详情" />
        </el-form-item>
      </el-form>
      <!-- 弹窗底部按钮 -->
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">提交修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 原有样式保留，新增细节优化样式 */
.detail-column {
  padding: 10px;
}
.detail-item {
  line-height: 24px;
}
.label {
  display: inline-block;
  width: 80px;
  font-weight: 500;
  color: #666;
}
/* 修改弹窗表单间距优化 */
.el-form-item {
  margin-bottom: 16px;
}
</style>